<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../plugins/jquery-2.1.0.js"></script>
		<script src="../plugins/element-ui/vue.js"></script>
		<script src="../plugins/element-ui/index.js"></script>
		<script src="../plugins/ComUtil.js"></script>
		<script src="../plugins/layer/layer.js"></script>
		<script src="js/yIndex.js"></script>
		<link rel="stylesheet" href="../plugins/element-ui/index.css" / />
		<link rel="stylesheet" href="css/mainIndex.css" / />
		<title></title>
		<style>
			.cg_ul {
				padding: 10px 0px 10px 20px;
			}
			
			.cg_ul li {
				margin-bottom: 10px;
				border-bottom: 1px solid #EBEEF5;
				font-size: 14px;
			}
			
			.cg_li_he {
				height: 30px;
			}
			
			.cg_li_dd {
				margin: auto;
			}
			
			.cg_ul {
				padding: 10px;
			}
			
			.cg_li {
				display: flex;
			}
			
			.cgsh {
				height: 55%;
				overflow: auto;
				width: 100%;
			}
			
			.cgspan {
				display: inline-block;
				min-width: 100px;
				word-wrap: break-word;
				white-space: normal;
			}
			
			.cgsp2 {
				font-family: ms sans serif, arial;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			
			.cgsp2_lj {
				text-decoration: underline;
				color: #8CA1B8;
			}
			
			.cgsp3_lj {
				color: #8CA1B8;
			}
			
			#cg_page {
				width: 300px;
			}
			
			#kaqx img,
			#cjqx img,
			#sgt img {
				margin-top: 15px;
				width: calc(100% - 20px);
				height: 180px;
			}
			
			.img_hread {
				padding: 5px;
				color: #C9C9C9;
				height: 20px;
				border-top: 1px solid #EBEEF5;
			}
			.de_img{
				height: 100%;
				width: 100%;
			}
			.de_img img {
			}
			.qxsh_img{
				height: 100%;
				width: 100%;
			}
			.layui-layer-page .layui-layer-content {
				position: relative;
				overflow: hidden;
			}

		</style>
	</head>

	<body>
		<div style="" id="cg_page">
			<div class="close_btn"></div>
			<div id="jxx_tb">
				<ul class="cg_ul" id="cd_ullis">
				<li class="cg_li cg_li_he">
				<span class="cgspan">井号：</span>
				<span class="cgsp2" >D234</span>
				</li>
				<li class="cg_li cg_li_he">
				<span class="cgspan">井号代码：</span>
				<span class="cgsp2" >SDKLJ</span>
				</li>
				<li class="cg_li cg_li_he">
				<span class="cgspan">构造位置：</span>
				<span class="cgsp2" title="普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′">四川盆地（中原油田）川东断褶带黄金口构造带大湾-土主－雷音铺构造NE向构造带大湾构造</span>
				</li>
				<li class="cg_li cg_li_he">
				<span class="cgspan">测线位置：</span>
				<span class="cgsp2" title="普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′">普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′。</span>
				</li>
			</ul>
				<div class="img_hreads">井基础信息</div>
			</div>
			<div id="kaqx">
				<div class="img_hread">开发曲线</div>
			</div>
			<div id="cjqx">
				<div class="img_hread">测进曲线</div>
			</div>
			<div id="sgt">
				<div class="img_hread">施工图</div>
			</div>
		</div>
		<script>
			var tb_jcxx = "";
			tb_jcxx += '<ul class="cg_ul" id="cd_ullis">' +
				'<li class="cg_li cg_li_he">' +
				'<span class="cgspan">井号：</span>' +
				'<span class="cgsp2" >D234</span>' +
				'</li>' +
				'<li class="cg_li cg_li_he">' +
				'<span class="cgspan">井号代码：</span>' +
				'<span class="cgsp2" >SDKLJ</span>' +
				'</li>' +
				'<li class="cg_li cg_li_he">' +
				'<span class="cgspan">构造位置：</span>' +
				'<span class="cgsp2" title="普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′">四川盆地（中原油田）川东断褶带黄金口构造带大湾-土主－雷音铺构造NE向构造带大湾构造</span>' +
				'</li>' +
				'<li class="cg_li cg_li_he">' +
				'<span class="cgspan">测线位置：</span>' +
				'<span class="cgsp2" title="普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′">普光－达县三维Inline1475、Crossline947交点处，磁偏角：西偏2°09′。</span>' +
				'</li>'
			'</ul>';
			$("#jxx_tb").append(tb_jcxx);

			var kfqxd = "";
			kfqxd += "";
			kfqxd += '<div class="de_img"><img class="qxsh_img" src="TestImg/gd01.jpg"></div>' +
				'<p>2015年该区沙四上纯下亚段上报控制含油面积2.15km2，控制储量199.42×104t。本次方案目的层沙四上纯下亚段。</p>';
			$("#kaqx").append(kfqxd);
			$("#cjqx").append(kfqxd);
			$("#sgt").append(kfqxd);
			$(".de_img").off('click');
			$(".de_img").on('click', function() {
				var deimg = $(this).html();
				layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					area: ['55%', '65%'],
					skin: 'layui-layer-nobg', //没有背景色
					shadeClose: true,
					content: deimg
				});
			})
			$(".close_btn").on('click' , function (){
				$("#cg_page").empty();
			})
		</script>
	</body>

</html>